<!--
 * @Author: your name
 * @Date: 2021-03-31 19:24:48
 * @LastEditTime: 2021-04-05 19:43:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template-master\src\views\product\components\Sku.vue
-->
<template>
  <div>
    <el-form label-width="80px"
             :model="skuInfo">
      <el-form-item label="SPU名称">
        {{spu.spuName}}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称"
                  v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)"
                  v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)"
                  v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input placeholder="规格描述"
                  rows="4"
                  type="textarea"
                  v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form ref="form"
                 label-width="80px"
                 :inline='true'>
          <el-form-item :label="attr.attrName"
                        v-for="attr in attrInfoList"
                        :key="attr.id">
            <el-select placeholder="请选择"
                       v-model="attr.attrOrattrVal">
              <el-option :label="attrVal.valueName"
                         :value="`${attr.id}:${attrVal.id}`"
                         v-for="attrVal in attr.attrValueList"
                         :key='attrVal.id'></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form ref="form"
                 label-width="80px"
                 :inline='true'>
          <el-form-item :label="saleAttr.saleAttrName"
                        v-for="saleAttr in spuSaleAttrList"
                        :key="saleAttr.id">
            <el-select placeholder="请选择"
                       v-model="saleAttr.saleAttrOrAttrVal">
              <el-option :label="spuSaleAttrValue.saleAttrValueName"
                         :value="`${saleAttr.id}:${spuSaleAttrValue.id}`"
                         v-for="spuSaleAttrValue in saleAttr.spuSaleAttrValueList"
                         :key="spuSaleAttrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table border
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  :data="spuImageList">
          <el-table-column prop="prop"
                           type="selection"
                           label="label"
                           width="55">
          </el-table-column>
          <el-table-column prop="prop"
                           label="图片"
                           width="width">
            <template slot-scope="{row,$index}">
              <img :src="row.imgUrl"
                   alt=""
                   style="width:100px;height:80px">
            </template>
          </el-table-column>
          <el-table-column prop="imgName"
                           label="名称"
                           width="width">
          </el-table-column>
          <el-table-column prop="prop"
                           label="操作"
                           width="width">
            <template slot-scope="{row,$index}">
              <el-button type="primary"
                         v-if="row.isDefault === '0' "
                         @click="defaultImg(row,spuImageList)">设为默认</el-button>
              <el-tag type="success"
                      v-else>默认</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="label">
        <el-button type="primary"
                   @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Sku',
  data () {
    return {
      skuInfo: {
        // 三大类收集
        // 父组件传递的，包含在spu里面的
        cartgroy3Id: "", //
        tmId: "", // 
        spuId: "", // 
        // v-model
        skuName: "", // 1
        price: "",//2
        skuDesc: "",//4
        weight: "",//3

        //是需要自己写代码收集
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0,
          // },
        ],

        skuDefaultImg: "",

        skuImageList: [
          // {
          //   imgName: "string",
          //   imgUrl: "string",
          //   isDefault: "string",
          //   spuImgId: 0,
          // },
        ],
        skuSaleAttrValueList: [
          // {
          //   saleAttrId: 0,
          //   saleAttrValueId: 0,
          // },
        ],
      },
      isDefaultImg: '',
      spu: {},
      attrInfoList: [],
      spuSaleAttrList: [],
      spuImageList: []
    }
  },
  methods: {
    //请求初始化数据展示
    async getSkuListInitData (row, cartgroy2Id, cartgroy3Id) {
      this.spu = row
      //获取平台属性列表
      const Promise1 = this.$API.attr.attrInfoList(row.id, cartgroy2Id, cartgroy3Id)
      //获取销售属性列表
      const Promise2 = this.$API.sku.getSpuSaleAttrList(row.id)
      //获取图片列表
      const Promise3 = this.$API.sku.getSpuImageList(row.id)
      try {
        const result = await Promise.all([Promise1, Promise2, Promise3])
        this.attrInfoList = result[0].data;
        this.spuSaleAttrList = result[1].data;
        let spuImageList = result[2].data
        spuImageList.forEach(item => item.isDefault = '0')
        this.spuImageList = spuImageList

      } catch (error) {
        this.$message.error('请求失败')
      }
    },
    //收集默认图片
    defaultImg (row, spuImageList) {
      spuImageList.forEach((item) => {
        item.isDefault = '0'
      })
      row.isDefault = '1'
      this.isDefaultImg = row
    },
    handleSelectionChange (val) {
      this.skuImageList = val
    },
    //保存
    async save () {
      let { skuInfo, attrInfoList, spuImageList, spuSaleAttrList, spu } = this
      //整理数据
      skuInfo.cartgroy3Id = spu.cartgroy3Id
      skuInfo.tmId = spu.tmId
      skuInfo.spuId = spu.spuId
      skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev, item) => {
        if (item.saleAttrOrAttrVal) {
          let [saleAttrId, saleAttrValueId] = item.saleAttrOrAttrVal.split(':')
          let obj = { saleAttrId, saleAttrValueId }
          prev.push(obj)
        }
        return prev
      }, [])
      skuInfo.skuAttrValueList = attrInfoList.reduce((prev, item) => {
        if (item.attrOrattrVal) {
          let [attrId, valueId] = item.attrOrattrVal.split(':')
          let obj = { attrId, valueId }
          prev.push(obj)
        }
        return prev
      }, [])
      skuInfo.skuImageList = spuImageList.map((item) => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      try {
        await this.$API.sku.addUpdate(skuInfo)
        this.$message.success('保存成功')
        this.$emit('update:visible', false)
        this.resetData()
      } catch (error) {
        this.$message.error('保存失败')
      }
    },
    //重置数据
    resetData () {
      this.skuInfo = {
        cartgroy3Id: "",
        tmId: "",
        spuId: "",
        // v-model
        skuName: "",
        price: "",
        skuDesc: "",
        weight: "",
        skuAttrValueList: [
        ],
        skuDefaultImg: "",
        skuImageList: [],
        skuSaleAttrValueList: [],
      },
        this.isDefaultImg = '',
        this.spu = {},
        this.attrInfoList = [],
        this.spuSaleAttrList = [],
        this.spuImageList = []
    },
    //取消
    cancel () {
      this.resetData()
      this.$emit('update:visible', false)
    }
  }
}
</script>
